import {size} from '@/app/utils';
import React,{useState,useEffect,useContext} from 'react';
import {
  View,
  Text,
  TextInput,
  StatusBar,
  Pressable,
} from 'react-native';
import Button from '@/app/components/Button'
import {styles} from './style/LoginScreenCss'
import Headers from '@/app/components/header/Headers';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {getEamilCode} from './serve'
import { useTranslation } from '@/app/utils/useTranslation';
import { useNavigation } from "@react-navigation/native";
let ForgetPasswordSccreen = (props:any)=>{
    const { t } = useTranslation();
    const navigation:any = useNavigation();
    const insets = useSafeAreaInsets();
    let [tabIndex,setTabIndex] = useState('0');
    let [phone,setPhone] = useState('');
    let [disabled,setDisabled] = useState(false);
    let [navBarHeight,setNavBarHeight] = useState(0);
    function getNavBarHeight(data: number) {
        console.log('getNavBarHeight---:',data);
        setNavBarHeight(data)
    }

    function onLogin(){
        navigation.reset({
            index: 0,
            routes: [{ name: 'login' } as never],
        });
    }

    function onNext(){
        if(!phone){
            return global.$toast({message:t('t361')})
        }
         // 邮箱格式校验（仅在 Email 模式下）
        if(tabIndex+''=='0'){
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if(!emailRegex.test(phone)){
                return global.$toast(t('t362'))
            }
        }
        let params={
            "loginName":phone,
        }
        getEamilCode(params).then(()=>{
            setDisabled(false);
            global.$toast({
                message:t('t363'),
                callback:()=>{
                    navigation.navigate('pages/auth/ForgetPasswordStep2Sccreen', { name: 'wangjimima', ...params });
                }
            })
        }).catch(err=>{
            setDisabled(false)
        })
    }

    useEffect(()=>{
            StatusBar.setBarStyle('dark-content');
    },[]);

    return (
         <View style={{ flex: 1,backgroundColor:"#fff"}}>
            <Headers
                title={''}
                border={false}
                barStyle={0}
                leftTitle={''}
                backgroundColor={'#fff'}
                centerColor={'#666'}
                {...props}
                leftIcon={require('@/assets/images/icon/back.png')}
                getNavBarHeight={getNavBarHeight}
            />
            <KeyboardAwareScrollView style={{ flex:1,paddingTop:size(40)}}>
                <View style={styles.form}>
                    <View>
                        <View>
                            <Text style={styles.title}>{t('t364')}</Text>
                        </View>
                        <View>
                            <Text style={styles.subtitle}>{t('t365')}</Text>
                        </View>
                    </View>
                    <View style={styles.tabbox}>
                        <Pressable onPress={()=>{
                            setTabIndex('0');
                            setPhone('');
                        }} style={[styles.tabItem,tabIndex+''=='0'?styles.tabItemActive:null]}>
                            <Text style={[styles.tabtext,tabIndex+''=='0'?styles.tabtextActive:null]}>{t('t366')}</Text>
                        </Pressable>
                        <Pressable onPress={()=>{
                            global.$toast({message:t('t29')})
                        }} style={[styles.tabItem,tabIndex+''=='1'?styles.tabItemActive:null]}>
                            <Text style={[styles.tabtext,tabIndex+''=='1'?styles.tabtextActive:null]}>{t('t367')}</Text>
                        </Pressable>
                    </View>
                    <View style={styles.formItem}>
                        <TextInput
                            readOnly={disabled}
                            value={phone||''}
                            inputMode={tabIndex+''=='0'?'email':'tel'}
                            onChangeText={(text) => {
                                setPhone(text+'')
                            }}
                            style={styles.input} placeholder={tabIndex+''=='0'?t('t361'):t('t369')}/>
                    </View>
                </View>
            </KeyboardAwareScrollView>
            <View style={{paddingBottom:size(insets.bottom?insets.bottom:10)}}>
                <View style={[{ marginTop: 20, paddingLeft: size(30), paddingRight: size(30)}]}>
                    <Button 
                        onClick={() => {
                            onNext();
                        }}
                        disabled={disabled}
                        style={styles.login_box_footer_btn}
                    >
                        <Text style={[styles.login_box_footer_btn_text]}>{t('t255')}</Text>
                    </Button>
                </View>
                <Text style={[styles.loginBox,{marginTop:size(20)}]}>{t('t370')}<Text onPress={()=>{
                    onLogin();
                }} style={{color:'#38B781'}}>{t('t371')}</Text></Text>
            </View>
        </View>
    )
}

export default ForgetPasswordSccreen;